<template>
  <div class="line-chart-container">
    <div class="line-chart-top-container">
      <el-row>
        <el-col :offset="5" :span="4"><el-select v-model="durType" placeholder="请选择" style="width: 150px;">
          <el-option
            v-for="item in options"
            :key="item.key"
            :label="item.label"
            :value="item.value"
          />
        </el-select></el-col>
        <el-col :span="8">
          <el-radio-group v-model="timeRange">
            <el-radio label="1" class="time-radio">1天内</el-radio>
            <el-radio label="3" class="time-radio">3天内</el-radio>
            <el-radio label="7" class="time-radio">7天内</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="4">
          <el-input v-model="timeRange">
            <template slot="append">
              <span class="el-radio__label">天内</span>
            </template>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handleSearch">确定</el-button>
        </el-col>
      </el-row>
    </div>

    <div v-loading="loading" class="line-chart-main-container">
      <div ref="lineChart" style="height:100%;width: 100%;" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme
import { parseTime } from '@/utils'
import { getAlarmTrend } from '@/api/report'

export default {
  mixins: [resize],
  data() {
    return {
      loading: true,
      chart: null,
      timeRange: '1',
      durType: '2',
      options: [
        { key: 1, value: '1', label: '间隔1分钟' },
        { key: 2, value: '2', label: '间隔1小时' },
        { key: 3, value: '3', label: '间隔1天' }
      ],
      queryForm: { beg: '', end: '', type: '' },
      trend: null,
      chartData: null,
      chartOptions: null
    }
  },
  watch: {
    'timeRange': {
      handler(newVal) {
        console.log('newVal', newVal)
      }
    },
    'chartOptions': {
      handler(newOption) {
        // console.log('newOption', newOption)
        this.initializeChart()
      }
    }
  },
  created() {
    // 1天内，间隔1小时
    const res = this.getTimeRange('1')
    this.queryForm = { ...res, type: this.durType }
    this.loading = true
  },
  mounted() {
    const a = setInterval(() => {
      if (!this.loading) clearInterval(a)
      getAlarmTrend(this.queryForm).then(response => {
        const trend = this.trend = response.data.trend
        this.chartOptions = this.getOptions(trend.xdata, trend.series)
        this.initializeChart()
        this.loading = false
      })
    }, 500)
  },
  beforeDestroy() {
    this.destroyChart()
  },
  methods: {
    handleSearch() {
      const res = this.getTimeRange(this.timeRange)
      if (typeof res === 'string') this.$message.error(res)
      else {
        this.queryForm = { ...res, type: this.durType }
        getAlarmTrend(this.queryForm).then(response => {
          const trend = this.trend = response.data.trend
          this.chartOptions = this.getOptions(trend.xdata, trend.series)
        })
      }
    },
    destroyChart() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    getTimeRange(newVal) {
      let end = new Date().getTime()
      let dur = 0
      if (isNaN(newVal)) return '不是数字'
      newVal = parseInt(newVal)
      if (!Number.isInteger(newVal)) return '不是整数'
      if (newVal <= 30) dur += 1000 * 60 * 60 * 24 * newVal
      else return '数值太大'
      let beg = end - dur
      beg = parseTime(beg)
      end = parseTime(end)
      // console.log('timeRange', beg, end)
      return { beg, end }
    },
    initializeChart() {
      this.destroyChart()
      console.log('初始化LineChart')
      this.chart = echarts.init(this.$refs.lineChart, 'macarons')
      this.chart.setOption(this.chartOptions)
    },
    getOptions(xData, series) {
      // console.log('xData, series', series, series)
      return {
        title: {
          text: '设备报警趋势',
          left: 'center',
          textStyle: {
            color: '#000'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '报警数据', itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: series,
            animationDuration: 2000,
            animationEasing: 'cubicInOut'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.line-chart-container {
  .line-chart-top-container {
    height: 50px;
    width: 100%;
    .time-radio {
      margin: 10px 10px;
    }
  }

  .line-chart-main-container {
    height: 350px;
    width: 100%;
  }
}

</style>
